<template>
    <div class="loginBigBox">
        <div class="login-min-box">
            <div class="box-left">
                <img src="../../assets/logo.png" alt="" />
            </div>
            <div class="box-right">
                <el-form
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                            type="password"
                            v-model="ruleForm.password"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="验证码" prop="age">
                        <el-input v-model.number="ruleForm.age"></el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()">
                            登录
                        </el-button>
                        <el-button @click="resetForm('ruleForm')">
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import storage from "../../utlis/storage";
export default {
    data() {
        // var checkAge = (rule, value, callback) => {
        //     if (!value) {
        //         return callback(new Error("用户名不能为空"));
        //     }
        //     // setTimeout(() => {
        //     //     if (!Number.isInteger(value)) {
        //     //         callback(new Error("请输入八位数密码"));
        //     //     }
        //     // }, 1000);
        // };
        // var validatePass = (rule, value, callback) => {
        //     if (value === "") {
        //         callback(new Error("请输入密码"));
        //     }
        //     // } else {
        //     //     if (this.ruleForm.password !== "") {
        //     //         this.$refs.ruleForm.validateField("password");
        //     //     }
        //     //     callback();
        //     // }
        // };

        return {
            ruleForm: {
                username: "",
                password: "",
                age: "",
            },
            rules: {
                username: [
                    {
                        required: true,
                        // validator: true,
                        trigger: "blur",
                        message: "请输入用户名",
                    },
                ],
                password: [
                    {
                        required: true,
                        // validator: true,
                        trigger: "blur",
                        message: "请输入密码",
                    },
                ],
                // age: [{ validator: checkAge, trigger: "blur" }],
            },
        };
    },
    methods: {
        storageUserInfo(user) {
            // 将信息存到vuex
            // this.$store.commit("users/SET_USERINFO", userInfo);
            storage.set("user", user);
            storage.set("token", user.token);
        },
        submitForm() {
            console.log(this.ruleForm);
            let data = {
                username: this.ruleForm.username,
                password: this.ruleForm.password,
            };
            console.log(data);
            axios.post("/user", data).then(
                (response) => {
                    console.log(response.data);
                    if (response.data.meta.status === 200) {
                        this.storageUserInfo(response.data.user);
                        this.$router.push("/");
                        this.response(response.data.meta.res);
                    } else {
                        this.error(response.data.meta.error);
                    }
                },
                (response) => {
                    console.log("error");
                }
            );
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        error(err) {
            this.$message.error({
                message: err,
                center: true,
            });
        },
        response(res) {
            this.$message({
                message: res,
                type: "success",
                center: true,
            });
        },
    },
};
</script>
<style lang="less" scoped>
.loginBigBox {
    width: 100%;
    height: 100%;
    position: relative;
}
.login-min-box {
    width: 450px;
    height: 300px;
    display: flex;
    overflow: hidden;
    position: absolute;
    left: 300px;
    top: 200px;
    border-radius: 5px;
    box-shadow: 0 0px 20px rgba(187, 220, 217);
    .box-left {
        width: 150px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(187, 220, 217, 0.3);
        img {
            width: 100px;
            height: 100px;
        }
    }
    .box-right {
        width: 300px;
        height: 300px;

        /deep/.el-form {
            display: flex;
            padding-top: 20px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 90%;
        }
    }
}
</style>
